<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import jyglService from '@/api/jygl'
import { JyshlcDTO } from '@/api/jygl-dto'
import LogicFlow from '@logicflow/core'
import Flow from '@/components/flow/index.vue'
import { Snapshot } from '@logicflow/extension'
import { by, ky } from './flow'
import lodash from 'lodash'
LogicFlow.use(Snapshot)
/** logicflow实例 */
const lf = ref<LogicFlow | undefined>()
const flowRef = ref()
const flowJson = ref()
const imgSrc = ref()
const loading = ref(false)

/*
 * 打开弹框
 */
const dialogVisible = ref(false)
const currentJyspzt = ref('')
const currentJylxmc = ref('')
const openDialog = (row: any) => {
  // 获取归档跟踪信息
  getLclb(row.jysqbh, row.jylxmc)
  currentJyspzt.value = row.jyztmc
  dialogVisible.value = true
  loading.value = true
  currentJylxmc.value = row.jylxmc
  if (row.jylxmc === '本院') {
    flowJson.value = lodash.cloneDeep(by.json)
  } else if (row.jylxmc === '跨院') {
    flowJson.value = lodash.cloneDeep(ky.json)
  }
}

const generateByFlow = () => {
  const node = flowJson.value.nodes.find(
    (node: any) => curJylcdm.value !== 'gd0460008' && node.id === curJylcdm.value,
  )
  if (node)
    node.properties = {
      current: true,
    }
  if (currentJyspzt.value === '审批通过') {
    const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
    node.properties = {
      complete: true,
    }
  }
  if (currentJyspzt.value === '待调档') {
    const edge = flowJson.value.edges.find((edge: any) => edge.targetNodeId === 'gd0460001')
    edge.properties = {
      complete: true,
    }
  }
  lzjlList.value.forEach((lc) => {
    const node = flowJson.value.nodes.find((node: any) => node.id === lc.jylcdm)
    node.properties = {
      complete: true,
    }
    if (lc.jylcdm === 'gd0460002') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460002' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460002' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
        const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
        node.properties = {
          complete: true,
        }
      }
    }
    if (lc.jylcdm === 'gd0460004') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460004' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460004' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
        const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
        node.properties = {
          complete: true,
        }
      }
    }
  })
  // 档案员调档
  const temp1 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460001')
  // 借阅部门负责人审批
  const temp2 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460002')
  // 归档部门负责人审批
  const temp3 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460004')
  if (curJylcdm.value === 'gd0460002' && !temp1) {
    const edge = flowJson.value.edges.find(
      (edge: any) => edge.sourceNodeId === 'startflow' && edge.targetNodeId === 'gd0460002',
    )
    edge.properties = {
      complete: true,
    }
  }
  if (temp1) {
    const edge = flowJson.value.edges.find(
      (edge: any) => edge.sourceNodeId === 'startflow' && edge.targetNodeId === temp1.jylcdm,
    )
    edge.properties = {
      complete: true,
    }
    if (temp1.shjgdm === 'gd0470002') {
      const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460008')
      node.properties = {
        complete: true,
      }
      const edge1 = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === temp1.jylcdm && edge.targetNodeId === 'gd0460008',
      )
      edge1.properties = {
        complete: true,
      }
      const edge2 = flowJson.value.edges.find((edge: any) => edge.sourceNodeId === 'gd0460008')
      edge2.properties = {
        complete: true,
      }
      const node1 = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
      node1.properties = {
        complete: true,
      }
    } else {
      const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460001-1')
      node.properties = {
        complete: true,
      }
      const edge = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === temp1.jylcdm && edge.targetNodeId === 'gd0460001-1',
      )
      edge.properties = {
        complete: true,
      }
      const edge1 = flowJson.value.edges.find((edge: any) => edge.sourceNodeId === 'gd0460001-1')
      edge1.properties = {
        complete: true,
      }
    }
  }
  if (!temp1 && temp2) {
    const edge = flowJson.value.edges.find(
      (edge: any) => edge.sourceNodeId === 'startflow' && edge.targetNodeId === temp2.jylcdm,
    )
    edge.properties = {
      complete: true,
    }
  }
  if (temp2 && temp3) {
    const node = flowJson.value.nodes.find((node: any) => node.id === 'transdepartment')
    node.properties = {
      complete: true,
    }
    const edge = flowJson.value.edges.find(
      (edge: any) => edge.sourceNodeId === 'transdepartment' && edge.text.value === '是',
    )
    edge.properties = {
      complete: true,
    }
  }
  if (temp2 && !temp3) {
    if (currentJyspzt.value === '审批通过') {
      const node = flowJson.value.nodes.find((node: any) => node.id === 'transdepartment')
      node.properties = {
        complete: true,
      }
      const edge = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === 'transdepartment' && edge.text.value === '否',
      )
      edge.properties = {
        complete: true,
      }
    }
    if (temp2.shjgdm === 'gd0470001' && currentJyspzt.value !== '审批通过') {
      const node = flowJson.value.nodes.find((node: any) => node.id === 'transdepartment')
      node.properties = {
        complete: true,
      }
      const edge = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === 'transdepartment' && edge.text.value === '是',
      )
      edge.properties = {
        complete: true,
      }
    }
  }
}

const generateKyFlow = () => {
  const node = flowJson.value.nodes.find(
    (node: any) => curJylcdm.value !== 'gd0460008' && node.id === curJylcdm.value,
  )
  if (node)
    node.properties = {
      current: true,
    }
  if (currentJyspzt.value === '审批通过') {
    const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
    node.properties = {
      complete: true,
    }
  }
  if (currentJyspzt.value === '待调档') {
    const edge = flowJson.value.edges.find((edge: any) => edge.targetNodeId === 'gd0460001')
    edge.properties = {
      complete: true,
    }
  }
  lzjlList.value.forEach((lc) => {
    const node = flowJson.value.nodes.find((node: any) => node.id === lc.jylcdm)
    node.properties = {
      complete: true,
    }
    if (lc.jylcdm === 'gd0460002') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460002' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
        const node = flowJson.value.nodes.find((node: any) => node.id === 'borrowfromhighlevel')
        node.properties = {
          complete: true,
        }
        // if (curJylcdm.value === 'gd0460004') {
        //   const edge = flowJson.value.edges.find(
        //     (edge: any) => edge.sourceNodeId === 'borrowfromhighlevel' && edge.text.value === '否',
        //   )
        //   edge.properties = {
        //     complete: true,
        //   }
        // } else {
        //   const edge = flowJson.value.edges.find(
        //     (edge: any) => edge.sourceNodeId === 'borrowfromhighlevel' && edge.text.value === '是',
        //   )
        //   edge.properties = {
        //     complete: true,
        //   }
        // }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460002' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
        const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
        node.properties = {
          complete: true,
        }
      }
    }
    if (lc.jylcdm === 'gd0460003') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460003' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460003' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
        const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
        node.properties = {
          complete: true,
        }
      }
    }
    if (lc.jylcdm === 'gd0460004') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460004' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460004' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
        const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
        node.properties = {
          complete: true,
        }
      }
    }
    if (lc.jylcdm === 'gd0460005') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460005' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460005' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
      }
    }
    if (lc.jylcdm === 'gd0460006') {
      if (lc.shjgdm === 'gd0470001') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460006' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjgdm === 'gd0470002') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0460006' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
      }
      const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
      node.properties = {
        complete: true,
      }
    }
  })
  // 档案员调档
  const temp1 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460001')
  // 借阅部门负责人审批
  const temp2 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460002')
  // 借阅部门分管院领导审批
  const temp3 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460003')
  // 归档部门负责人审批
  const temp4 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460004')
  // 办公室负责人审批
  const temp5 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460005')
  // 归档部门分管院领导审批
  const temp6 = lzjlList.value.find((lc) => lc.jylcdm === 'gd0460006')
  if (temp1) {
    const edge = flowJson.value.edges.find(
      (edge: any) => edge.sourceNodeId === 'startflow' && edge.targetNodeId === temp1.jylcdm,
    )
    edge.properties = {
      complete: true,
    }
    if (temp1.shjgdm === 'gd0470002') {
      const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460008')
      node.properties = {
        complete: true,
      }
      const edge1 = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === temp1.jylcdm && edge.targetNodeId === 'gd0460008',
      )
      edge1.properties = {
        complete: true,
      }
      const edge2 = flowJson.value.edges.find((edge: any) => edge.sourceNodeId === 'gd0460008')
      edge2.properties = {
        complete: true,
      }
      const node1 = flowJson.value.nodes.find((node: any) => node.id === 'gd0460007')
      node1.properties = {
        complete: true,
      }
    } else {
      const node = flowJson.value.nodes.find((node: any) => node.id === 'gd0460001-1')
      node.properties = {
        complete: true,
      }
      const edge = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === temp1.jylcdm && edge.targetNodeId === 'gd0460001-1',
      )
      edge.properties = {
        complete: true,
      }
      const edge1 = flowJson.value.edges.find((edge: any) => edge.sourceNodeId === 'gd0460001-1')
      edge1.properties = {
        complete: true,
      }
      if (!temp2) {
        const edge = flowJson.value.edges.find((edge: any) => edge.targetNodeId === 'gd0460002')
        edge.properties = {
          complete: true,
        }
      }
    }
  }
  if (temp3 || temp4) {
    const node = flowJson.value.nodes.find((node: any) => node.id === 'borrowfromhighlevel')
    node.properties = {
      complete: true,
    }
    if (!temp3) {
      const edge = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === 'borrowfromhighlevel' && edge.text.value === '否',
      )
      edge.properties = {
        complete: true,
      }
    } else {
      const edge = flowJson.value.edges.find(
        (edge: any) => edge.sourceNodeId === 'borrowfromhighlevel' && edge.text.value === '是',
      )
      edge.properties = {
        complete: true,
      }
    }
  }
  if (temp5 && temp6) {
    const node = flowJson.value.nodes.find((node: any) => node.id === 'borrowfromsamelevel')
    node.properties = {
      complete: true,
    }
    const edge = flowJson.value.edges.find(
      (edge: any) => edge.sourceNodeId === 'borrowfromsamelevel' && edge.text.value === '是',
    )
    edge.properties = {
      complete: true,
    }
  }
  if (temp5 && !temp6) {
    if (temp5.shjgdm === 'gd0470001') {
      if (currentJyspzt.value === '审批通过') {
        const node = flowJson.value.nodes.find((node: any) => node.id === 'borrowfromsamelevel')
        node.properties = {
          complete: true,
        }
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'borrowfromsamelevel' && edge.text.value === '否',
        )
        edge.properties = {
          complete: true,
        }
      } else {
        const node = flowJson.value.nodes.find((node: any) => node.id === 'borrowfromsamelevel')
        node.properties = {
          complete: true,
        }
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'borrowfromsamelevel' && edge.text.value === '是',
        )
        edge.properties = {
          complete: true,
        }
      }
    }
  }
}
/*
 * 获取流程列表
 */
// 流转记录
const curJylcdm = ref('')
const lzjlList = ref<JyshlcDTO[]>([])
const getLclb = (jysqbh: string, jylxmc: string) => {
  const params = {
    jysqbh,
  }
  jyglService
    .queryJyshlc(params)
    .then((res) => {
      if (res.data) {
        lzjlList.value = res.data?.jyshjlList
        curJylcdm.value = res.data?.jylcdm
        if (jylxmc === '本院' && curJylcdm.value) {
          generateByFlow()
        } else if (jylxmc === '跨院' && curJylcdm.value) {
          generateKyFlow()
        }
        setTimeout(() => {
          lf.value?.getSnapshotBase64().then((res: any) => {
            imgSrc.value = res.data
          })
          loading.value = false
        }, 800)
      }
    })
    .catch((err) => {
      console.log(err)
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const closeDialog = () => {
  flowJson.value = undefined
  imgSrc.value = ''
}

defineExpose({
  openDialog,
})
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="流程跟踪"
    width="1200"
    :close-on-click-modal="false"
    @closed="closeDialog"
  >
    <div class="dialog-box" v-loading="loading">
      <div class="flow-box">
        <Flow
          v-show="!imgSrc"
          ref="flowRef"
          :json="flowJson"
          @created="(value: LogicFlow) => lf = value"
        >
        </Flow>
        <img :src="imgSrc" alt="" />
      </div>
      <el-table v-if="imgSrc" :data="lzjlList" style="width: 100%" height="calc(80vh - 410px)">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="jylcmc" label="流程节点" width="180" show-overflow-tooltip />
        <el-table-column prop="shrdwmc" label="单位" width="180" show-overflow-tooltip />
        <el-table-column prop="shrbmmc" label="部门" width="180" show-overflow-tooltip />
        <el-table-column prop="shrmx" label="审批人/调档人" width="130" show-overflow-tooltip />
        <el-table-column prop="zhxgsj" label="审批时间/调档时间" width="180" />
        <el-table-column prop="shjgmc" label="审批结论" width="100" show-overflow-tooltip />
        <el-table-column prop="thyy" label="原因" show-overflow-tooltip />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  height: 80vh;
  .flow-box {
    height: 410px;
    line-height: 410px;
  }
  img {
    width: 100%;
  }
  .timeline-box {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .timeline-conten {
    border: 1px solid #dfdfdf;
    padding: 10px;
  }
  .card-item-xm {
    font-size: 14px;
    letter-spacing: 0px;
    color: #4b5881;
    font-weight: bold;
    margin-right: 30px;
  }
  .card-item-nr {
    font-size: 14px;
    color: #05b75d;
  }
  .el-empty {
    width: 100%;
    height: 100%;
  }
}
</style>
